<template>
	<view>
		<view class="top-menu">
			<u-tabs :list="tabsData" :current="current" @click="clickTabs" lineColor="#00D26E" :activeStyle="{
			            color: '#00D26E',
						fontSize: '24rpx',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#333333',
						fontSize: '24rpx',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<view class="lb-search">
			<u-search height="80rpx" bgColor="#fff" placeholderColor="#333" color="#333" placeholder="搜索"
				@clear="search" borderColor="#E7E7E7" v-model="keyword" :showAction="false" @search="search"></u-search>
		</view>
		<view class="lb-main-32" style="padding-top: 0;">
			<u-empty v-if="listData.length < 1" mode="data" text="暂无数据" icon="/static/empty/data.png"></u-empty>

			<view class="lb-box" v-for="(item,index) in listData" :key="index">
				<view class="lb-item">
					<view class="lb-left">
						<image :src="getImgUrl(item.cover_image)" mode=""></image>
					</view>
					<view class="lb-right">
						<view class="lb-name">
							{{item.name}}
						</view>
						<view class="lb-ratio">
							提成比例：
							<text>
								{{item.first||item.second}}{{item.type == 1?'%':'元'}}
							</text>
						</view>
						<view class="lb-btn">
							<button class="btn" open-type="share" :data-id="item.goods_id" :data-name="item.name"
								:data-img="item.cover_image">
								<image src="/static/icon/share-f.png" mode=""></image>
								分销海报
							</button>
							<button class="btn" @click="goTo(item.goods_id)">
								<image src="/static/icon/list-f.png" mode=""></image>
								活动页面
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		distributionApiGoods
	} from "@/api/apis/retail.js"
	import {
		setImgUrl,
		fmtFormat
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				limit: 10,
				listData: [],
				isLoading: false,
				tabsData: [{
					name: '洗护频道',
				}, {
					name: '丽人美容'
				}, {
					name: '易驾考'
				}, {
					name: '晓牧原'
				}],
				current: 0
			}
		},
		//分享
		//onShareAppMessage 分享给朋友
		//onShareTimeline  分享到朋友圈
		// #ifdef MP
		onShareAppMessage: function(res) {
			let that = this;
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target, '++++')
				console.log(that.user_info, '----')
				let dataset = res.target.dataset;
				let gName = dataset.name;
				let img = setImgUrl(dataset.img);
				let gid = dataset.id;
				let uid = that.user_info.id;
				let url = ''
				if (this.current == 0) {
					url = '/pages/xi-hu/goods-detail/goods-detail'
				} else if (this.current == 1) {
					url = '/pages/mei-rong/goods-detail/goods-detail'
				} else if (this.current == 2) {
					url = '/pages/jia-kao/goods-detail/goods-detail'
				} else if (this.current == 3) {
					url = '/pages/xmy/goods-detail/goods-detail'
				}
				return {
					title: gName,
					imageUrl: img,
					path: url + '?uid=' + uid + '&id=' + gid + '&share_type=' + this
						.current
				}
			}
		},
		onShareTimeline: function(res) {
			let that = this;
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target, '----')
				console.log(that.user_info, '----')
				let dataset = res.target.dataset;
				let gName = dataset.name;
				let img = setImgUrl(dataset.img);
				let gid = dataset.id;
				let uid = that.user_info.id;
				let url = ''
				if (this.current == 0) {
					url = '/pages/xi-hu/goods-detail/goods-detail'
				} else if (this.current == 1) {
					url = '/pages/mei-rong/goods-detail/goods-detail'
				} else if (this.current == 2) {
					url = '/pages/jia-kao/goods-detail/goods-detail'
				} else if (this.current == 3) {
					url = '/pages/xmy/goods-detail/goods-detail'
				}
				return {
					title: gName,
					imageUrl: img,
					path: url + '?uid=' + uid + '&id=' + gid + '&share_type=' + this
						.current
				}
			}

		},
		// #endif
		methods: {
			//切换tabs
			clickTabs(item) {
				this.current = item.index;
				this.page = 1;
				this.listData = []
				this.getList();
			},
			//跳转
			goTo(id) {
				let url = ''
				if (this.current == 0) {
					url = '/pages/xi-hu/goods-detail/goods-detail'
				} else if (this.current == 1) {
					url = '/pages/mei-rong/goods-detail/goods-detail'
				} else if (this.current == 2) {
					url = '/pages/jia-kao/goods-detail/goods-detail'
				} else if (this.current == 3) {
					url = '/pages/xmy/goods-detail/goods-detail'
				}
				uni.navigateTo({
					url: url + '?id=' + id
				})
			},
			//搜索
			search() {
				this.page = 1;
				this.getList()
			},
			getImgUrl(url) {
				return setImgUrl(url);
			},
			//列表
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				distributionApiGoods({
					// is_recommend: 1,
					page: this.page,
					limit: this.limit,
					keywords: this.keyword,
					type: this.current
				}).then(res => {
					uni.hideLoading();
					if (this.page == 1) {
						this.listData = res.data.data;
					} else {
						this.listData = this.listData.concat(res.data.data);
					}
					if (res.data.total > this.page * this.limit) {
						// console.log(res.data.length)
						//请求成功 节流阀 设置为false（没有走完函数不允许再次请求）
						this.isLoading = false;
						this.page++;
					}
				})
			},
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			//注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
			if (!this.isLoading) {
				this.getList();
			}

		},
	}
</script>

<style lang="scss">
	.lb-search {
		padding: 15rpx 32rpx;
	}

	.top-menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lb-box {
		// height: 188rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.lb-item {
			display: flex;
			// align-items: center;

			.lb-left {
				width: 140rpx;
				height: 140rpx;
				padding: 12rpx 0;
			}

			.lb-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 12rpx;

				.lb-name {
					font-size: $main-font-28;
					color: $main-font-color;
				}

				.lb-ratio {
					font-size: $main-font-24;
					color: $main-font-color;

					text {
						color: #F65D40;

						&::after {
							// content: '%';
						}
					}
				}

				.lb-btn {
					display: flex;

					.btn {
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						margin-right: 24rpx;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						width: 156rpx;
						height: 48rpx;
						background: linear-gradient(106deg, #F7583F 0%, #F28F4C 100%);
						border-radius: 24rpx;

						font-size: $main-font-24;
						color: $main-font-color-white;

						&:nth-of-type(2n-1) {
							background: linear-gradient(106deg, #FFC67D 0%, #FF8F35 100%);
						}
					}
				}
			}

		}
	}
</style>